@import '~Global/styles/index.scss';
.post-body {
  margin: 0 auto;
  max-width: 800px;
  .post-page-title {
    font-size: 32px;
    margin-bottom: 15px;
    word-wrap: break-word;
  }
  .writer-msg {
    margin: 15px 0;
    display: flex;
    .writer-detail {
      color: $text-detail-color;
    }
  }
  .post-page-summary {
    font-size: 15px;
    color: #999;
    padding: 5px;
    background-color: rgba($color: #d0d0d0, $alpha: 0.2);
    display: flex;
    justify-content: flex-start;
    .label {
      padding-left: 5px;
    }
  }
}

.comment-editor {
  // border: 1px solid #b1adad;

  .w-e-toolbar {
    z-index: 901 !important;
  }
  .w-e-text-container {
    height: 120px !important;
    z-index: 900 !important;
  }
}
.comment-btn-group {
  margin-top: 10px;
  text-align: right;
  transform: translateY(-42px);

  @keyframes showBtn {
    100% {
      transform: translateY(0);
    }
  }

  @keyframes hideBtn {
    0% {
      transform: translateY(0px);
    }
  }
}

.showBtn {
  animation: showBtn 0.5s both;
}
.hideBtn {
  animation: hideBtn 0.5s both;
}

.nologin {
  display: flex;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  margin-top: 10px;
}
.comment {
  &::before {
    content: '';
    border-bottom: 1px solid rgb(175, 171, 171, 0.5);
    display: block;
    margin: 40px 0;
  }

  .title {
    font-size: 22px;
    margin-bottom: 30px;
  }

  .comment-item {
    border-bottom: 1px solid rgb(175, 171, 171, 0.5);
    padding: 20px 0;
    display: flex;
    .avatar {
      flex: none;
    }
    .comment-content {
      display: flex;
      flex-direction: column;
      .commenter-msg {
        margin-left: 10px;
        .comment-detail {
          color: $text-detail-color;
        }
        .content {
          margin-top: 5px;
        }
      }
      .act-row {
        margin-top: 10px;
        display: flex;
        .act-item {
          cursor: pointer;
          margin-left: 10px;
          margin-right: 15px;
          display: flex;
          align-items: center;
          .act-text {
            color: $text-detail-color;
            margin-left: 5px;
          }
        }

        :hover {
          color: red;
        }
      }
    }
  }
}
